<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet"
	href="../../../css/Semantic-UI-CSS-master/semantic.min.css" />
<style>
* {
	margin: 0px;
	padding: 0px;
	color: DimGray;
}

.zth-body-container {
	width: 100%;
	height: auto;
	overflow: hidden;
	min-height: 0;
	position: relative;
}
/* 左边布局 */
.zth-left-container {
	margin-top: 50px;
	width: 50%;
	height: auto;
	display: inline-block;
	margin-left: 150px;
	overflow-y: hidden;
	overflow-x: hidden;
}

.zth-left-container div {
	margin-left: 50px;
}
/* 右边布局 */
.zth-right-container {
	margin-top: 50px;
	width: 20%;
	height: auto;
	display: inline-block;
	position: fixed;
	right: 150px;
	top: 0px;
	padding-left: 8px;
}

/* 左边 */
.zth-head-img {
	padding-bottom: 20px;
	
}

.zth-head-img img {
	width: 30px;
	height: 30px;
	border-radius: 50px;
	font-family: '楷体';
}

.zth-head-date {
	color: #cccccc;
	position:absolute;
	right: 650px;
}

.zth-head-text {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 20px;
	font-family: '新宋体';
}

.zth-body-img img {
	width: 200px;
	
}

.zth-bottom-border {
	margin-top: 20px;
	border-bottom: 2px solid #C0C0C0;
	box-shadow: 3px 3px 2px #C0C0C0;
	margin-bottom: 20px;
}



/* 右边 */
.zth-right-container label {
	height: 25px;
	line-height: 25px;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	border-bottom: 2px solid;
	padding-bottom: 10px;
}

.zth-right-container hr {
	margin-bottom: 20px;
}

.zth-div-input input {
	width: 80%;
	height: 30px;
	border-right: none;
	border: 1px solid Silver;
	outline: none;
}

.zth-div-input span {
	display: inline-block;
	border: 1px solid Silver;
	width: 19%;
	height: 30px;
	position: absolute;
	padding-left: 18px;
	padding-top: 5px;
	cursor: pointer;
	background-color: Silver;
}

.zth-div-input span:hover {
	background-color: LightGrey;
}

.zth-but-mat {
	margin-bottom: 30px;
}

.zth-tag-multiple {
	width: 80%;
}

.zth-tag-multiple span {
	display: inline-block;
	border: 1px solid #CCCCCC;
	height: 25px;
	margin: 3px;
	cursor: pointer;
	line-height: 25px;
	padding-left: 2px;
	padding-right: 2px;
}

.zth-tag-multiple span:hover {
	background: Gray;
	color: wheat;
	border: 1px solid Gray;
}

.zth-state-issue span {
	display: block;
	margin-bottom: 10px;
}

.zth-state-issue span a {
	text-decoration: none;
	color: Silver;
}

.zth-state-issue span a:hover {
	color: Gray;
}

.zth-click-most span {
	display: block;
}

.zth-click-most span a {
	text-decoration: none;
	color: Silver;
}

.zth-click-most span a:hover {
	color: Gray;
}

.zth-click-most hr {
	margin-top: 5px;
	margin-bottom: 5px;
	color: LightGre;
}

.zth-botton-but {
	margin-left: 35%;
	margin-top: 30px;
}
.zth-botton-but span{
	display: inline-block;
	padding: 5px;
	font-size: 30px;
}
</style>
</head>
<body>
	<div id="app">
		<div class="zth-body-container">
			<!-- 左边 -->
			<div class="zth-left-container">
				<!-- <div>
					<div class="zth-head-img"><img src="../../../images/1.jpg">13 in 日常水笔<span class="zth-head-date">2020-05-04</span></div>
					<div class="zth-head-text">Spring mvc教程</div>
					<div class="zth-body-img"><img src="../../../images/login1.jpg"></div>
					<div class="zth-bottom-border"></div>
				</div> -->

				<div v-for="ss in content" @click="but(ss.blog_id)" style="cursor: pointer;">
					<div class="zth-head-img">
						<img :src="config[9].config_value">{{config[11].config_value}} in
						{{ss.blog_category_name}}<span class="zth-head-date">{{ss.create_time}}</span>
					</div>
					<div class="zth-head-text">{{ss.blog_title}}</div>
					<div class="zth-body-img">
						<img :src="ss.blog_cover_image">
					</div>
					<div class="zth-bottom-border"></div>
				</div>

			</div>

			<!-- 右边 -->
			<div class="zth-right-container">
				<div>
					<div>
						<label>搜索文章</label>
					</div>
					<hr />
					<div class="zth-div-input zth-but-mat">
						<input type="text" placeholder="输入关键字搜索(标题)" v-model="blog_title"/>
						 <span><i class="search icon" @click="search(blog_title)"></i></span>
					</div>
					<div>
						<label>热门标签</label>
					</div>
					<hr />
					<div class="zth-but-mat">
						<div class="zth-tag-multiple">
							<span v-for="ss in HotTag" @click="tagCheck(ss.tag_name)">{{ss.tag_name}}</span> 
						</div>
					</div>
					<div>
						<label>最新发布</label>
					</div>
					<hr />
					<div class="zth-but-mat">
						<div class="zth-state-issue">
							<span v-for="ss in newests"><a href="javascript:void(0); " @click="search(ss.blog_title)">{{ss.blog_title}}</a></span>
						</div>
					</div>
					<div>
						<label>点击最多</label>
					</div>
					<hr />
					<div class="zth-but-mat">
						<div class="zth-click-most">
							<div v-for="index of 6">
							<span><a href="javascript:void(0); " @click="search(maximums[index].blog_title)">{{maximums[index].blog_title}}</a></span>
							<hr />
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="zth-botton-but">
				<i class="arrow left icon" @click="down" v-if="index>1" style="font-size: 35px;"></i> 
				<span>{{index}}</span>	
				<i class="arrow right icon" @click="below" v-if="index<length/10" style="font-size: 35px;"></i>
			</div>
		</div>
	</div>
	<script src="../../../js/vue/axios.min.js"></script>
	<script src="../../../js/vue/vue.js"></script>

	<script>
		new Vue({
			el:'#app',
			data(){
				return{
					content:[],//储存博客数据
					index:1,//页数
					length:0,//储存数据长度
					blog_title:'',//博客标题
					config:[],//储存配置表数据
					newests:[],//最新发布
					maximums:[],//点击最多
					HotTags:[],//热门标签
				}
			},
			mounted:function(){
				this.leftShow();
				this.newest();
				this.configShow();
				this.maximum();
				this.HotTag();
			},
			methods:{
				//显示全部
				leftShow:function(){
					axios.get('/ssb/blog/blogAll?blog_status=1&page='+this.index).then(res=>{
						var o=res.data.data;
						this.content=o;
						this.length=res.data.count;
						for(var i=0;i<o.length;i++){
							 var end=new Date(o[i].create_time)
								let d = new Date(end)
								//将时间戳转化成年月日
								let batchDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
							this.content[i].create_time=batchDate;
						}
						
					},err=>{
						console.log(err);
					});
				},
				//下一页
				below:function(){
					this.index++;
					this.leftShow();
					window.parent.ssb();
				},
				//上一页
				down:function(){
					this.index--;
					this.leftShow();
					window.parent.ssb();
				},
				//模糊查
				search:function(title){
					axios.get('/ssb/blog/blogAll?blog_status=1&blog_title='+title).then(res=>{
						var o=res.data.data
						this.content=o;
						this.length=res.data.count;
						for(var i=0;i<o.length;i++){
							 var end=new Date(o[i].create_time)
								let d = new Date(end)
								//将时间戳转化成年月日
								let batchDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
							this.content[i].create_time=batchDate;
						}
					},err=>{
						console.log(err);
					});
					
				},
				//配置数据
				configShow:function(){
					axios.get('/ssb/config/findAll').then(res=>{
						var o=res.data;
						this.config=o;
					},err=>{
						console.log(err);
					});
				},
				//热门标签
				HotTag:function(){
					axios.get('/ssb/tag/tagAll?limit=8').then(res=>{
						console.log(res);
						 var o=res.data.list;
						this.HotTag=res.data.list;
						for(var i=0;i<o.length;i++){
							 var end=new Date(o[i].create_time)
								let d = new Date(end)
								//将时间戳转化成年月日
								let batchDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
							this.HotTag[i].create_time=batchDate;
						} 
					},err=>{
						console.log(err);
					})
				},
				//最新发布
				newest:function(){
					axios.get('/ssb/blog/blogAll?blog_status=1&limit=6').then(res=>{
						var o=res.data.data;
						this.newests=res.data.data;
						for(var i=0;i<o.length;i++){
							 var end=new Date(o[i].create_time)
								let d = new Date(end)
								//将时间戳转化成年月日
								let batchDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
							this.newests[i].create_time=batchDate;
						}
					},err=>{
						console.log(err);
					})
				},
				//点击量最多
				maximum:function(){
					axios.get('/ssb/blog/blogAll?blog_status=1&limit='+this.length).then(res=>{
						var o=res.data.data;
						var result=res.data.data;
						result.sort(sortId);
						this.maximums=result;
						for(var i=0;i<o.length;i++){
							 var end=new Date(o[i].create_time)
								let d = new Date(end)
								//将时间戳转化成年月日
								let batchDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
							this.maximums[i].create_time=batchDate;
						}
					},err=>{
						console.log(err);
					})
				},
				but:function(unknownId){
					
					//调用父级方法
					window.parent.alter(unknownId);
				},
				//根据标签查询
				tagCheck:function(blog_tags){
					axios.get('/ssb/blog/blogAll?blog_status=1&blog_tags='+blog_tags).then(res=>{
						var o=res.data.data
						this.content=o;
						this.length=res.data.count;
						for(var i=0;i<o.length;i++){
							 var end=new Date(o[i].create_time)
								let d = new Date(end)
								//将时间戳转化成年月日
								let batchDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
							this.content[i].create_time=batchDate;
						}
					},err=>{
						console.log(err);
					});
				}
			}
		});
		//排序
		function sortId(a,b){  
		       return b.blog_views-a.blog_views
		    }
	</script>

</body>
</html>
